import React from "react";

const syntaxExamples = [
  {
    title: "标题 (Headings)",
    syntax: "# H1\n## H2\n### H3",
    render: <h1 className="text-xl font-bold">H1</h1>,
  },
  {
    title: "粗体 (Bold)",
    syntax: "**bold text**",
    render: <strong>bold text</strong>,
  },
  {
    title: "斜体 (Italic)",
    syntax: "*italicized text*",
    render: <em>italicized text</em>,
  },
  {
    title: "引用 (Blockquote)",
    syntax: "> blockquote",
    render: (
      <blockquote className="pl-4 border-l-4 border-gray-300">
        blockquote
      </blockquote>
    ),
  },
  {
    title: "无序列表 (Unordered List)",
    syntax: "- First item\n- Second item",
    render: (
      <ul>
        <li className="list-disc ml-5">First item</li>
        <li className="list-disc ml-5">Second item</li>
      </ul>
    ),
  },
  {
    title: "有序列表 (Ordered List)",
    syntax: "1. First item\n2. Second item",
    render: (
      <ol>
        <li className="list-decimal ml-5">First item</li>
        <li className="list-decimal ml-5">Second item</li>
      </ol>
    ),
  },
  {
    title: "行内代码 (Inline Code)",
    syntax: "`code`",
    render: <code className="bg-gray-100 px-2 py-1 rounded text-sm">code</code>,
  },
  {
    title: "链接 (Link)",
    syntax: "[title](https://www.example.com)",
    render: (
      <a href="#" className="text-blue-600 underline">
        title
      </a>
    ),
  },
  {
    title: "图片 (Image)",
    syntax: "![alt text](image.jpg)",
    render: <span className="text-gray-500 italic">显示一张图片</span>,
  },
  {
    title: "表格 (Table)",
    syntax:
      "| Syntax | Description |\n| --- | --- |\n| Header | Title |\n| Paragraph | Text |",
    render: <span className="text-gray-500 italic">显示一个表格</span>,
  },
];

export default function MarkdownSyntaxGuide() {
  return (
    <div className="space-y-3">
      <h3 className="text-base font-semibold">Markdown 语法速查</h3>
      <div className="text-sm space-y-3">
        {syntaxExamples.map((item, index) => (
          <div key={index} className="space-y-2">
            <div className="flex justify-between items-center">
              <div className="text-gray-700 font-medium">{item.title}</div>
              <div className="text-center">{item.render}</div>
            </div>
            <pre className="bg-gray-50 p-2 rounded text-xs font-mono whitespace-pre-wrap border">
              {item.syntax}
            </pre>
          </div>
        ))}
      </div>
    </div>
  );
}
